<template>
	<HeaderBar></HeaderBar>
	<view class="container px-15px">
		<view class="header-box">
			<view class="title lh-30px">
				<up-text color="#000" size="22" :text="detailData.title"></up-text>
			</view>
			<view class="flex-y-center mt-4px text-12px text-secondary">
				<text class="mr-24px">周期{{ detailData.periodDays }}天</text>
				<text class="mr-24px">{{ detailData.biddingCounts }}人投标</text>
				<text>{{ detailData.viewCounts }}人浏览</text>
			</view>
		</view>
		<view
			class="user-box flex-y-center justify-between mt-20px py-8px b-t b-b border-primary"
		>
			<view class="flex-y-center">
				<up-image
					src="/static/temp/detail-user-avatar.png"
					width="56px"
					height="56px"
					shape="circle"
				/>
				<view class="ml-8px">
					<view class="font-bold text-primary">小鹿屿</view>
					<view class="flex-y-center mt-2px text-secondary">
						<view class="i-material-symbols-location-on text-#b4b4b4"></view>
						<text class="text-14px">洪山区·光谷</text>
					</view>
				</view>
			</view>
			<view class="flex-center w-72px h-32px rd-16px b border-primary">
				<view class="i-ep-plus mr-2px"></view>
				<text class="text-14px text-primary">关注</text>
			</view>
		</view>
		<view class="mt-18px">
			<view class="flex-y-center justify-between mb-10px">
				<view class="flex-y-center">
					<view
						class="tips-price mr-4px w-90px h-22px lh-22px rd-4px text-center text-12px text-white font-bold"
						>现金预付100%</view
					>
					<up-text
						mode="price"
						text="7232.32"
						color="#F15816"
						size="16"
						bold
					></up-text>
				</view>
				<view
					class="flex-center px-12px h-28px rd-14px bg-#E8FFF4 text-#00CB6B"
				>
					<view class="i-ep-clock mr-4px"></view>
					<text class="text-12px">距结束：3天24小时</text>
				</view>
			</view>
			<view class="mb-12px text-regular">
				期待你能有育儿经验，帮忙做做饭，孩子哭闹期待你能有育儿经验，帮忙做做饭，孩子哭闹期待你能有育儿经验，帮忙做做饭，孩子哭闹
			</view>
			<view class="flex-y-center mb-20px">
				<view
					class="mr-8px px-12px h-28px lh-28px bg-#f5f5f5 rd-14px text-regular text-center font-500"
					>月嫂</view
				>
				<view
					class="mr-8px px-12px h-28px lh-28px bg-#f5f5f5 rd-14px text-regular text-center font-500"
					>家政</view
				>
				<view
					class="mr-8px px-12px h-28px lh-28px bg-#f5f5f5 rd-14px text-regular text-center font-500"
					>护工</view
				>
			</view>
			<view class="mb-16px">
				<up-image
					src="/static/temp/banner-homemaking.png"
					width="100%"
					radius="10"
				></up-image>
			</view>
			<view class="conversation-wrap">
				<view class=" mb-12px text-16px lh-22px font-600">
					全部留言·{{ detailData.commentCounts }}
				</view>
				<view class="flex-y-center mb-15px px-15px h-40px bg-primary rd-30px">
					<input class="uni-input" placeholder="请输入您想说的话～" />
				</view>
				<view class="flex items-start justify-between mb-15px">
					<view class="flex">
						<up-image
							src="/static/temp/detail-user-avatar.png"
							width="46px"
							height="46px"
							shape="circle"
						/>
						<view class="ml-8px">
							<view class="flex-y-center mb-4px">
								<view class="mr-6px text-regular">小鹿屿</view>
								<up-tag text="作者" type="success"  shape="circle" size='mini' plain></up-tag>
								<view class="ml-6px text-12px text-secondary">6小时前</view>
							</view>
							<view class="text-primary">我也想找一个保姆，楼主先</view>
						</view>
					</view>
					<view class="flex-y-center">
						<u-icon name="/static/common/like-unset.png" :size="20"></u-icon>
						<!-- <u-icon name="/static/common/filter-icon.png" :size="20"></u-icon> -->
						 <text class="ml-4px text-secondary">3</text>
					</view>
				</view>
				<view class="flex items-start justify-between ml-20px">
					<view class="flex ml-30px">
						<up-image
							src="/static/temp/detail-user-avatar.png"
							width="46px"
							height="46px"
							shape="circle"
						/>
						<view class="ml-8px">
							<view class="flex-y-center mb-4px">
								<view class="mr-6px text-regular">小鹿屿</view>
								<view class="ml-6px text-12px text-secondary">3小时前</view>
							</view>
							<view class="text-primary">我也是一样的</view>
						</view>
					</view>
					<view class="flex-y-center">
						<u-icon name="/static/common/like-set.png" :size="20"></u-icon>
						<!-- <u-icon name="/static/common/filter-icon.png" :size="20"></u-icon> -->
						 <text class="ml-4px text-secondary">23</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import HeaderBar from "@/components/header-bar/header-bar.vue";
// import Api from '@/api/index.ts';

defineOptions({
	name: "SolverDetailIndex",
});

// 当前详情的id
const id = ref<string | number | null>(null);

// 当前详情页数据
const detailData = ref<Partial<API.RecommendResponse>>({
	title: "全职保姆可带娃",
	description:
		"期待你能有育儿经验，帮忙做做饭，孩子哭闹期待你能有育儿经验，帮忙做做饭，孩子哭闹期待你能有育儿经验，帮忙做做饭，孩子哭闹",
	periodDays: 20,
	repeatNumber: "number",
	biddingCounts: 244,
	viewCounts: 244,
	collectCounts: "number",
	likeCounts: "number",
	commentCounts: 233,
	collected: "boolean",
	liked: "boolean",
	commented: "boolean",
	city: "",
	province: "",
	area: "",
});

interface NavigatorOptions {
	id: string | number;
}

// onLoad((options: NavigatorOptions) => {
// 	id.value = options.id;
// 	getDetail();
// });

// 根据id获取详情
// const getDetail = () => {
// 	Api.recommend.queryDetail(id.value).then((res) => {
// 		detailData.value = res.data;
// 	});
// };

const content = ref("");
</script>

<style lang="scss" scoped>
.tips-price {
	background: linear-gradient(129deg, #fb8840 0%, #ff5858 100%);
}
</style>
